It was marked as duplicate but the suggestion of duplication is not my issue. I got to apply a simple jquery filter system on my page. It is on a dynamic page that has buttons for each year. There is a list of participants (Custom post type), and each participant is registered to an year. So, for example, if we click the button "2018" that will only show participants of that year, same for 2019, 2020, etc.

The problem is: I would like to incorporate the possibilite to filter 2 different years. For instance: If we click 2019 and 2020 button, I'd like to show all the cards from participants of 2019 and the participants of 2020 as well.

Is there any way (simple) that would be possible to adapt this to accept multiple active buttons and show the cards accordingly?

Here it is the php and the jquery code:

The Cards (they have the class dynamic, used for filtering):

<div class="card default grid-model ed-<?php echo $theEdition; ?>" >

    <?php $theImage = get_field('image_a_la_une'); ?>
    <div class="image" style="background-image: url(<?php echo esc_url($theImage['url']); ?>);"></div>
    
    <div class="info">
        <p class="year">Edition <?php echo $theEdition; ?></p>
        <h6 class="product-type main-info"><?php the_field('nom_du_projet'); ?></h6>
        <a class="link" href="<?php echo the_permalink(); ?>"></a>
    </div>
</div>

The Filter buttons (using data-year to apply the filter):

<?php  
    foreach($categories as $category){
    $theyear = $category->cat_name;
    $catcount = get_category($category->cat_ID)->category_count;
    echo '<div class="btn btn_transparent btn-year" data-year="ed-' . $theyear . '">' . $category->cat_name . '</div>'; 
    }
?>

The jquery:

$('.btn-year').on('click', function(){
    $(this).addClass('active');
    $('.btn-year').not(this).removeClass('active');
});

$('.btn-year').on('click', function(){
    var value = $(this).attr('data-year');
    if(value == "all"){
        $('.card').show();
    } else {
        $(".card").not("."+value).hide();
        $(".card").filter("."+value).show();
    }
});